.box {
    display: flex;
    width: 80%;
    margin: 20px auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.chat-left,
.chat-right {
    padding: 10px;
    /* 可选：为左右两侧添加一些内边距 */
}

.chat-left {
    /*flex: 0 0 300px;*/
    /*!* 左边部分固定宽度为300px *!*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*!* 垂直排列子元素 *!*/
    /*height: 625px;*/
    width: 30%;
    background: #ffffff;
    border-right: 1px solid #ddd;
    padding: 15px;
    overflow-y: auto;
}

.chat-left a {
    display: block;
    padding: 10px;
    /* 为每个链接添加内边距 */
    color: #333;
    /* 链接文字颜色 */
    text-decoration: none;
    /* 去除下划线 */
    border-bottom: 1px solid #ddd;
}

.chat-left a:hover {
    background-color: #f5f5f5;
    /* 鼠标悬停时背景色 */
}

.user {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
    height: 85px;
    /* 每个用户的高度 */
}

.chat-left a:last-child {
    border-bottom: none;
    /* 移除最后一个用户的底部边框 */
}

.avatar {
    margin-right: 16px;
    /* 头像和右侧内容的间距 */
}

.avatar img {
    width: 64px;
    /* 头像宽度 */
    height: 64px;
    /* 头像高度 */
    border-radius: 50%;
    /* 圆形头像 */
    object-fit: cover;
    /* 图片适应容器 */
}

.desc {
    display: flex;
    flex-direction: column;
    /* 让内部元素垂直排列 */
    justify-content: center;
    /* 垂直居中对齐（如果需要的话） */
}

.name {
    display: flex;
    align-items: center;
    /* 用户名和状态垂直居中对齐 */
}

.name span {
    font-weight: bold;
    /* 用户名加粗 */
}

.status {
    margin-left: 8px;
    /* 用户名和状态之间的间距 */
    color: gray;
    /* 状态文字颜色 */
    font-size: 14px;
    /* 状态文字大小 */
}

.msg {
    margin-top: 4px;
    /* 用户名状态和消息内容之间的间距 */
    font-size: 14px;
    /* 消息内容文字大小 */
    color: #333;
    /* 消息内容文字颜色 */
}

.chat-right {
    width: 70%;
    /* 右边部分占据剩余空间 */
    display: flex;
    flex-direction: column;
    /* 垂直排列子元素（如果需要的话） */
    border-left: 1px solid #ddd;
    /* 可选：为右边部分添加左侧边框 */
    flex: 0 0 500px;
    height: 625px;
}

.container {
    overflow-y: auto;
    /* 添加垂直滚动条 */
    border-bottom: 1px solid #ddd;
    /* 底部边框 */
    width: 880px;
    height: 445px;
    padding: 0;
    margin-left: -10px;
}

.chat-right {
    position: relative;
    /* 确保子元素可以相对于这个容器定位 */
    /* 其他样式 */
}

.messaging {
    position: relative;
    /* 确保按钮可以相对于这个容器定位 */
    padding: 10px;
    /* 给文本区域和按钮一些空间 */
    /* 其他样式 */
}

.txt .message {
    width: 95%;
    /* 让文本区域占据父容器的全部宽度 */
    height: 100px;
    /* 设置固定高度 */
    border: none;
    /* 去除边框 */
    padding: 10px;
    /* 添加内边距 */
    outline: none;
    /* 去除聚焦时的默认边框（轮廓） */
    box-shadow: none;
    /* 去除可能的聚焦阴影 */
    resize: none;
    font-size: 15px;
}

.sendBtn {
    position: absolute;
    /* 使用绝对定位 */
    bottom: 5px;
    /* 距离父容器底部10px */
    right: 5px;
    /* 距离父容器右侧10px */
        /* 按钮样式 */
    padding: 10px 20px;
    background-color: gray;
    /* 背景 */
    color: white;
    /* 白色文字 */
    border: none;
    /* 去除边框 */
    border-radius: 5px;
    /* 圆角 */
    cursor: pointer;
    /* 鼠标悬停时显示为手形 */
}


.sendBtn:hover {
    background-color: #0056b3;
    /* 鼠标悬停时改变背景颜色 */
}

.insert {
    display: flex;
    /* 使用flex布局使按钮在一行显示 */
    gap: 10px;
    /* 按钮之间的间距 */
    margin-bottom: 10px;
    /* 与下面的文本区域保持一定距离 */
}

.insert img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.insert button {
    background-color: transparent;
    /* 透明背景 */
    border: none;
    /* 去除边框 */
    padding: 0;
    /* 去除内边距 */
    cursor: pointer;
    /* 鼠标悬停时显示为手形 */
    font-size: large;
    /* 增大图标大小（如果需要） */
    /* 你可以根据需要添加其他样式，如颜色、圆角等 */
}

/* 可选的：为按钮添加悬停效果 */
.insert button:hover {
    background-color: #f0f0f0;
    /* 浅灰色背景 */
    border-radius: 50%;
    /* 圆角效果（如果图标是圆形的） */
}

.emoji-popup {
    display: none;
    /* 初始隐藏 */
    position: absolute;
    /* 绝对定位以便放置在按钮上方 */
    z-index: 1000;
    /* 确保浮层在其他内容之上 */
    background-color: white;
    /* 背景色 */
    border: 1px solid #ccc;
    /* 边框 */
    padding: 10px;
    /* 内边距 */
    /* 可以添加更多的样式，比如宽度、高度、圆角等 */
    cursor: pointer;
}

.emoji {
    display: flex;
    flex-wrap: wrap;
    /* 允许子元素换行 */
}

.emoji-item {
    width: calc(100% / 9 - 10px);
    /* 每行9个，减去一些间距 */
    margin: 5px;
    /* 子元素之间的间距 */
    text-align: center;
    /* 文字居中，对于表情符号也适用 */
    box-sizing: border-box;
    /* 包括padding和border在内计算元素总宽度和高度 */
}

.emoji-item:hover {
    background-color: #f0f0f0;
    /* 可选：鼠标悬停时改变背景色 */
}

.target-user {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
    margin-bottom: 10px;
    /* 可选：为每个消息添加一些垂直间距 */
    margin-left: 30px;
    margin-top: 25px;
}

.user-avatar {
    border-radius: 50%;
    /* 将头像设置为圆形 */
    width: 50px;
    /* 设置头像的宽度 */
    height: 50px;
    /* 设置头像的高度，与宽度相同以保持圆形 */
    margin-right: 10px;
    /* 在头像和消息框之间添加一些间距 */
}

.send-msg {
    position: relative;
    /* 为消息框设置相对定位，以便内部的消息泡泡可以使用绝对定位 */
    width: auto;
}

.message-bubble-left, .message-bubble-right {
    position: relative;
    /* 为消息泡泡设置相对定位，以便可以添加指向头像的三角形 */
    padding: 10px;
    /* 为消息内容添加内边距 */
    background-color: #f0f8ff;
    /* 设置消息泡泡的背景色 */
    border-radius: 5px;
    /* 设置消息泡泡的圆角 */
    max-width: 80%;
    /* 可选：限制消息泡泡的最大宽度 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 可选：为消息泡泡添加阴影 */
}

/* 添加指向头像的三角形 */
.message-bubble-left::before {
    content: '';
    position: absolute;
    top: 10px;
    /* 调整三角形的顶部位置 */
    left: -10px;
    /* 调整三角形的左侧位置，使其指向头像 */
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    /* 设置三角形顶部的透明边框 */
    border-bottom: 10px solid transparent;
    /* 设置三角形底部的透明边框 */
    border-right: 10px solid #f0f8ff;
    /* 设置三角形右侧的边框颜色，与消息泡泡背景色相同 */
}

.message-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 15px; /* 为每条消息添加一些垂直间距 */
}

.myself {
    flex-direction: row-reverse; /* 对于“我自己”的消息，反转flex子项的排列顺序 */
}


.user-avatar {
    border-radius: 50%; /* 将头像设置为圆形 */
    width: 50px; /* 设置头像的宽度 */
    height: 50px; /* 设置头像的高度 */
    margin-left: 10px; /* 在头像和消息框之间添加一些间距（注意方向已反转） */
}

/* 可选：为消息泡泡添加指向头像的三角形 */
.message-bubble-right::after {
    content: '';
    position: absolute;
    right: -10px; /* 调整三角形的右侧位置，使其指向头像 */
    top: 50%; /* 调整三角形的垂直位置到中间 */
    transform: translateY(-50%); /* 使用transform来垂直居中三角形 */
    width: 0;
    height: 0;
    border-top: 10px solid transparent; /* 设置三角形顶部的透明边框 */
    border-bottom: 10px solid transparent; /* 设置三角形底部的透明边框 */
    border-left: 10px solid #dcf8c6; /* 设置三角形左侧的边框颜色，与消息泡泡背景色相同 */
}

